<script setup>
import { reactive, computed } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app';
import { toast } from '@/uni_modules/uview-plus'
import { numberUnify } from '@/utils'
import { getUserInfoApi, getWalletApi } from '@/api/user.js';
// 数据
const data = reactive({
  payMethod: 2,
  userInfo: {},
  info: {},
  isVIP: false,
  walletBalance: '0.00',
  couponInfo: {}
})
onLoad(options => {
  data.info = JSON.parse(options.info)
  console.log('options', data.info)
  getUserInfo()
})
// 当页面展示时触发（可以在此处接收返回的数据）
onShow(() => {
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 1]; // 获取当前个页面实例
  if (prevPage && prevPage.couponInfo) {
    console.log('上个页面传回的数据', prevPage.couponInfo)
    data.couponInfo = prevPage.couponInfo;
  }
});
// 订单总额
const totalPrice = computed(() => {
  if (!data.info.price) return '0.00'
  return numberUnify(data.info.price.totalPrice / 100)
})
// 运费金额
const deliveryPrice = computed(() => {
  if (!data.info.price) return '0.00'
  return numberUnify(data.info.price.deliveryPrice / 100)
})
// 支付总额
const payPrice = computed(() => {
  if (!data.info.price) return '0.00'
  return numberUnify(data.info.price.payPrice / 100 - couponPrice.value || 0)
})
// 优惠券金额
const couponPrice = computed(() => {
  if (!data.couponInfo.discountPrice) return null
  return numberUnify(data.couponInfo.discountPrice / 100)
})
// 获取用户信息
function getUserInfo() {
  getUserInfoApi({})
    .then(res => {
      data.userInfo = res.data
      if (data.userInfo.level) {
        data.isVIP = true
        getWallet()
      }
      // console.log('userInfo', info.userInfo)
    })
}
// 获取用户vip钱包信息
function getWallet() {
  getWalletApi({})
    .then(res => {
      data.walletBalance = numberUnify(res.data.balance / 100)
    })
}
// 前往选择优惠券页面
const goSelectCoupon = () => {
  uni.navigateTo({
    url: '/subPackage/shop/createorder/selectCoupon?list=' + JSON.stringify(data.info.coupons)
  })
}

// 提交订单并支付
const submit = () => {
  toast('支付服务未开通，请联系客服')
  // uni.redirectTo({
  //   url: '/subPackage/shop/createorder/payResult'
  // })
}
</script>

<template>
  <view class="create-order-page">
    <!-- 商品列表 -->
    <view v-if="data.info.items" class="commodity-list">
      <view class="commodity-item" v-for="item in data.info.items" :key="item">
        <view class="left">
          <view class="img-box">
            <image style="width: 100rpx; height:100rpx;" :src="item.picUrl" mode="scaleToFill" />
          </view>
          <view class="info">
            <view class="name">{{ item.spuName }}</view>
            <view class="sku up-line-1">规格：{{ item.properties[0].valueName }}</view>
          </view>
        </view>
        <view class="right">
          <view class="price">¥{{ numberUnify(item.price / 100) }}</view>
          <view class="num-box">
            <up-icon name="close" color="#000000" size="12"></up-icon>
            <text class="num">{{ item.count }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 订单详情 -->
    <view class="order-detail-box">
      <view class="head">订单详情</view>
      <!-- 商品金额 -->
      <view class="order-detail-item">
        <view class="label">商品金额</view>
        <view class="value">
          ￥ {{ totalPrice }}
        </view>
      </view>
      <!-- 运费 -->
      <view class="order-detail-item">
        <view class="label">运费</view>
        <view class="value">
          ￥{{ deliveryPrice }}
        </view>
      </view>
      <!-- 商品金额 -->
      <view class="order-detail-item">
        <view class="label">优惠券</view>
        <view class="value" @click="goSelectCoupon">
          <text v-if="couponPrice !== null" style="color: #FF1504;">-¥{{ couponPrice }}</text>

          <text v-else>去选择</text>
          <up-icon name="arrow-right" color="#333333" size="12"></up-icon>
        </view>
      </view>
    </view>
    <!-- 支付方式 -->
    <view class="pay-way-box">

      <view class="head">支付方式</view>
      <view class="pay-way-list">
        <up-radio-group v-model="data.payMethod" placement="column" inactiveColor="#666666" activeColor="#FFC870">
          <!-- 水卡支付 -->
          <view v-if="data.isVIP" class="pay-way-item">
            <view class="left">
              <image style="width: 50rpx; height:50rpx;" src="/static/images/icons/pay_method1.png"
                mode="scaleToFill" />
              <text>会员水卡（余额：¥{{ data.walletBalance }}）</text>
            </view>
            <up-radio label="" :name="1">
            </up-radio>
          </view>
          <!-- 微信支付 -->
          <view class="pay-way-item">
            <view class="left">
              <image style="width: 50rpx; height:50rpx;" src="/static/images/icons/pay_method2.png"
                mode="scaleToFill" />
              <text>微信支付</text>
            </view>
            <up-radio label="" :name="2">
            </up-radio>
          </view>
        </up-radio-group>
      </view>
    </view>
    <!-- 提交订单区域-底部 -->
    <view class="bottom-bar">
      <view class="content-box">
        <view class="total-price">
          <text class="label">合计：</text>
          <text class="unit">￥</text>
          <text class="amount">{{ payPrice }}</text>
        </view>
        <view class="pay-btn">
          <u-button type="primary" size="large" @click="submit">提交订单</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.create-order-page {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #F9F9F9;

  // 商品列表
  & .commodity-list {
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 10rpx;

    & .commodity-item {
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:first-child {
        margin-top: 0rpx;
      }

      & .left {
        display: flex;

        & .img-box {
          width: 100rpx;
          height: 100rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }

        & .info {
          margin-left: 20rpx;

          & .name {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          & .sku {
            margin-top: 10rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
          }
        }
      }

      & .right {

        & .price {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }

        & .num-box {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 10rpx;
          line-height: 24rpx;

          &::v-deep .u-icon {
            margin-top: 5rpx;
          }

          & text {
            padding-left: 6rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
          }
        }
      }
    }
  }

  // 订单详情
  & .order-detail-box {
    margin-top: 16rpx;
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;

    & .head {
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }

    & .order-detail-item {
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      & .label {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }

      & .value {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;

        &::v-deep .u-icon {
          margin-left: 10rpx;
          font-weight: 700rpx;
        }
      }
    }
  }

  // 支付方式
  & .pay-way-box {
    margin-top: 20rpx;
    margin-bottom: 278rpx;
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;

    & .head {
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }

    & .pay-way-list {
      & .pay-way-item {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & .left {
          display: flex;
          align-items: center;

          & text {
            padding-left: 20rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
          }
        }
      }
    }
  }

  // 提交订单区域-底部
  & .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 176rpx;
    background: #FFFFFF;

    & .content-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18rpx 0rpx;

      & .total-price {
        margin-left: 62rpx;

        & .label {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }

        & .unit {
          font-weight: 400;
          font-size: 28rpx;
          color: #FF1504;
        }

        & .amount {
          font-weight: 600;
          font-size: 36rpx;
          color: #FF1504;
        }
      }

      & .pay-btn {
        margin-right: 30rpx;

        &::v-deep .u-button {
          width: 308rpx;
          height: 90rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #FFFFFF;
          border: none;
          background: #FFA618;
          border-radius: 50rpx;

        }
      }
    }
  }
}
</style>